import React from 'react'
import { connect } from 'react-redux'

function Count(props) {
  console.log(props)
  return (
    <div>
      <p>{props.xxx}</p>
      <button
        onClick={() => {
          props.dispatch({ type: 'INCREMENT', num: 10 })
        }}
      >
        +
      </button>
    </div>
  )
}
// WithCount组件的作用: 他们内部监听了redux数据的变化, 如果redux数据变化,WithCount更新.Count是WithCount的子组件,所以Count也会更新
//mapState调用时机: 1. connect函数执行时,为了一开始就把redux数据传递给Count组件 2. 当redux数据变化时,将最新的数据传递给Count
function mapStateToProps(state) {
  return {
    xxx: state.count,
  }
}
const WithCount = connect(mapStateToProps)(Count)

export default WithCount
